<!--
 * @Descripttion: 生态同质化区域分析弹框
-->
<template>
  <div class="page-modal"
    v-loading.fullscreen.lock="fullscreenLoading"
    element-loading-background="rgba(0, 0, 0, 0.5)"
    :element-loading-text="loadingText">
    <lark-drawer
      class="eco-homo-task-drawer"
      ref="workCard"
      title="作业面板"
      direction="left"
      width="30vw"
      height="auto"
    >
      <div class="eco-homo-main">
        <div class="form-operation">
          <el-button
            type="primary"
            @click="addHandler"
            icon="el-icon-plus"
            size="small"
            :disabled="searchList.length >= ecoNameList.length"
            >增加参数</el-button
          >
          <el-button
            type="primary"
            @click="searchHandler"
            size="small"
            icon="el-icon-search"
            >查询</el-button
          >
        </div>
        <div class="form-list">
          <el-form
            :inline="true"
            :ref="`form${key}`"
            :rules="rules"
            :model="item"
            v-for="(item, key) in searchList"
            :key="key"
          >
            <el-col :span="10">
              <el-form-item prop="zbdm">
                <el-select
                  v-model="item.zbdm"
                  placeholder="请选择指数类型"
                  @change="ecoNameChange($event, key)"
                >
                  <el-option
                    :label="itemA.zbmc"
                    :value="itemA.zbdm"
                    v-for="itemA in ecoNameList"
                    :key="itemA.zbdm"
                    :disabled="disableList.includes(itemA.zbdm)"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="zsz">
                <el-select v-model="item.zsz" placeholder="请选择范围值">
                  <template v-if="item.zbdm">
                    <el-option
                      :label="itemB.name"
                      :value="itemB.value"
                      v-for="itemB in ecoValueList[item.zbdm]"
                      :key="itemB.value"
                    ></el-option>
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item>
                <i class="el-icon-delete" @click="deleteHandler(key)"></i>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </div>
    </lark-drawer>
    <lark-drawer
      v-if="searchTable && searchTable.length > 0"
      class="eco-homo-area-drawer"
      ref="areaDrawer"
      title="查询结果"
      direction="right"
      width="30vw"
      height="auto"
    >
      <template slot="title-operation">
        <i class="icon-download" @click="downloadClick"></i>
      </template>
      <div class="eco-homo-main">
        <div class="header">
          <p v-for="(item, key) in searchTable" :key="key">
            <span>{{ item.zbdm }}/{{ item.zbmc }}/{{ item.zbfl }}</span>
            <span>{{ item.zsz }}</span>
          </p>
        </div>
        <div class="bottom">
          <el-table
            class="table-box"
            :data="tableData"
            stripe
            style="width: 100%"
          >
            <el-table-column prop="xzqmc" label="乡镇名称" align="center">
            </el-table-column>
            <el-table-column label="面积(平方米)" align="center">
              <template slot-scope="scope">
              <span>{{ scope.row.mj }}</span> 
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="highLight(scope.row)"
                  type="text"
                  size="small"
                  icon="el-icon-location-outline"
                >
                  定位
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </lark-drawer>
  </div>
</template>
<script>
import { homo } from "@/api/eco/eco";
import { getHomoQuota } from "@/api/eco/homo";
import GeometryUtils from "@/utils/yc/GeometryUtils";
import LayerUtils from "@/utils/yc/LayerUtils";
import common from "./common"
export default {
  name: "HomoModal",
  props:{
    view:{
      type: Object,
      default(){
        return null
      }
    }
  },
  data() {
    return {
      // 加载状态
      fullscreenLoading:false,
      // 加载文字
      loadingText: '正在下载中，请耐心等待......',
      rules: {
        zbdm: [{ required: true, message: "请选择指标类型", trigger: "blur" }],
        zsz: [
          { required: true, message: "请选择指标范围值", trigger: "blur" },
        ],
      },
      // 查询条件
      searchList: [
        {
          zbdm: "",
          zsz: "",
        },
      ],
      // 指数名称
      ecoNameList: [],
      // 指数范围值
      ecoValueList: {},
      // 禁用项
      disableList: [],
      // 查询表格
      searchTable: [],
      // 查询结果
      tableData: [],
      // pdf数据
      pdfData:{}
    };
  },
  mixins:[common],
  created() {
    this.getHomoQuotaRequest()
    
  },
  methods: {
    // 渲染指标值
    renderEcoValue(key,value){
      let ecoName = ""
      this.ecoValueList[key].forEach(item => {
        if(item.value === value){
          ecoName = item.name
        }
      })
      return ecoName
    },
    // 请求生态指标
    async getHomoQuotaRequest(){
      const res = await getHomoQuota()
      if(res) {
        this.ecoNameList = res
        this.ecoNameList.forEach((item) => {
          this.ecoValueList[item.zbdm] = item.zsz;
        });
      }
    },
    // 选择框变化
    ecoNameChange(value, key) {
      this.disableList[key] = value;
      this.ecoNameList.forEach((item) => {
        if (item.zbdm === value) {
          this.searchList[key].zbmc = item.zbmc;
          this.searchList[key].zbfl = item.zbfl;
        }
      });
    },
    // 增加参数
    addHandler() {
      this.searchList.push({ zbdm: "", zsz: "" });
    },
    // 删除参数
    deleteHandler(key) {
      if (this.searchList.length > 1) {
        this.searchList.splice(key, 1);
        this.disableList.splice(key, 1);
      } else {
        this.$message({
          message: "至少有一条参数",
          type: "warning",
        });
      }
    },
    downloadClick() {
      this.downloadRequest(this.pdfData, "生态同质化区域分析" + new Date().getTime())
    },
    // 查询
    searchHandler() {
      // 校验
      let flag = true;
      this.searchList.forEach((item, key) => {
        this.$refs[`form${key}`][0].validate((valid) => {
          if (!valid) {
            flag = false;
            return false;
          }
        });
      });
      if (flag) {
        this.searchTable = JSON.parse(JSON.stringify(this.searchList));
        this.searchTable.forEach(item => {
          this.ecoValueList[item.zbdm].forEach(itemA => {
            if(itemA.value === item.zsz){
              item.zsz = itemA.name
            }
          })
        })
        this.tableRequest();
        if (this.$refs.areaDrawer) this.$refs.areaDrawer.showState = true;
      }
    },
    // 表格请求
    async tableRequest() {
      LayerUtils.clearRenderDrawLayer(this.view);
      this.loadingText = '正在查询中，请耐心等待......'
      this.fullscreenLoading = true
      const res = await homo({
        stzbtj: JSON.stringify(this.searchList),
      });
      this.fullscreenLoading = false
      if(res && res.features){
        // 1.地图渲染
        this.$emit("mapRender",(res.features))
        // 更新数据
        this.update(res.features)
      }
    },
    update(res){
      // 临时的街乡镇对象
      const town = {
        '150125':{
          xzqmc: '武川县',
          xzqdm: '150125',
          mj:0
        }
      }
      // pdf几何图形要素对象集合
      const features = []
      res.forEach((item) => {
        // 表格数据准备
        const mj =  item.attributes.mj
        if(town[item.attributes.xzqdm]){
          town[item.attributes.xzqdm].mj += mj
        }else{
          town[item.attributes.xzqdm] = {
            xzqmc: item.attributes.xzqmc,
            xzqdm: item.attributes.xzqdm,
            mj
          }
        }
        town['150125'].mj += mj

        // pdf数据准备
        const wkid = this.view ? this.view.spatialReference.wkid : undefined 
        features.push({
          fileName: item.attributes.xzqdm + item.attributes.OBJECTID,
          jsonFeature: JSON.stringify(GeometryUtils.graphicToGeoJson([item], wkid))
        })
      })
      //  将街乡镇对象转成数组
      const tzhqy = []
      for(let key in town){
        town[key].mj = town[key].mj.toFixed(2)
        tzhqy.push(town[key])
      }

      // 生成表格数据
      this.tableData = tzhqy

      // 生成pdf数据
      this.pdfData = {
        stzbtj: this.searchTable,
        tzhqy,
        features,
        type: "5"
      }
    },
    // 高亮显示
    highLight(row) {
      this.$emit("locationHandler", row)
    },
  }
};
</script>
<style lang="scss" scoped>
.eco-homo-task-drawer {
  position: absolute;
  top: 100px;
  left: 0;
  z-index: 1;

  .eco-homo-main {
    height: 56vh;
    padding: 10px;
    background-color: #fff;
    overflow-x: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
      border-radius: 0;
      background-color: rgba(35, 31, 125, 0.6);
    }
    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background-image: linear-gradient(90deg, #086b7a, rgb(17,81,30));
    }

    .el-icon-delete {
      font-size: 20px;
      cursor: pointer;
      margin-left: 14px;
      color: #08651a;
    }

    .form-operation {
      width: 100%;
      display: flex;
      // justify-content: center;
      margin-bottom: 14px;

      ::v-deep .el-button {
        width: 98px;
        &.is-disabled:hover {
          background-image: none;
        }
        &:last-child {
          margin-left: 24px;
        }
      }
    }
  }
}

.eco-homo-area-drawer {
  position: absolute;
  top: 100px;
  right: 0;
  z-index: 1;

  .icon-download {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("~@/assets/images/download.svg") no-repeat;
    background-size: cover;
    cursor: pointer;
  }

  .eco-homo-main {
    height: 65vh;
    background-color: rgb(245, 243, 243);
    overflow-x: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
      border-radius: 0;
      background-color: rgba(35, 31, 125, 0.6);
    }
    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background-image: linear-gradient(90deg, #086b7a, rgb(17,81,30));
    }

    .header {
      position: relative;
      padding: 14px 40px;
      font-size: 16px;
      color: #3e3e3e;
      border-bottom: 5px solid #fff;

      p {
        display: flex;
        justify-content: space-between;
      }
    }

    .bottom {
      padding: 14px 0;
    }
  }
}
</style>